import React, { PureComponent } from 'react';
import { Row, Col, Card, List, Avatar, Tag, Breadcrumb, Icon,PageHeader } from 'antd';

import Link from 'umi/link';

import GridContent from '@/components/PageHeaderWrapper/GridContent'

import DeviceCard from './component/deviceCard';
import resource from '../resource';
import styles from '../styles.less'
import DeviceIndexCard from './component/device_index';
import DeviceParameter from './component/device_parameter';
import DeviceTimeSeries  from './component/device_timeseries';
import DeviceModelCurve  from './component/device_modelcurve'; 

 

class DeviceMonitor extends PureComponent {

    render() {
        return (
            <div>
                <div style={{ margin: '-24px -24px 0 ' }}  className={styles.wrapper}   >
                
                        <div style={{ paddingBottom: '16px' }} >
                            <Breadcrumb>
                                <Breadcrumb.Item>
                                    <Link to="/homepage">首页</Link>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>
                                    <Link to="/iiot_monitor/main-sys">能源站系统</Link>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>
                                    <Link to="/iiot_monitor/system">直燃机系统</Link>
                                </Breadcrumb.Item>
                                <Breadcrumb.Item>设备</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                    </div>
                    
               
                    <div style={{ margin: '24px 0px 0 ' }}  >
                    <GridContent >
                        <Row gutter={24} style={{ marginBottom: 16 }} align="bottom" >

                            <Col sm={24} xs={24} md={16}>

                                <Card size="small" title="实时数据" style={{ marginBottom: 24 }}>
                                    <Card.Grid style={{ width: '220px', padding: '6px' }}>
                                        <DeviceCard deviceName="1#直燃机" deviceSrc={resource.pic.zhiranji} ></DeviceCard></Card.Grid>
                                    <Card.Grid style={{ width: '100%', padding: '12px ' }}>
                                        <DeviceIndexCard></DeviceIndexCard>
                                    </Card.Grid>
                                    <Card.Grid style={{ width: '100%', padding: '6px' }} >
                                        <DeviceParameter></DeviceParameter>
                                    </Card.Grid>
                                </Card>

                            </Col>
                            <Col sm={24} xs={24} md={8}>
                             

                                <Card size="small" title="时序数据" style={{ marginBottom: 24, height: 280 }}>
                                    <DeviceTimeSeries  id="trrr11111"></DeviceTimeSeries>
                                </Card>


                                <Card size="small" title="设备模型" style={{ marginBottom: 24, height: 280 }}>
                                    <DeviceModelCurve id="trrr111113333" />
                                </Card>
                                <Card size="small" title="故障信息" style={{ marginBottom: 0 }}
                                    actions={[<span><Icon type="setting" /> 10</span>, <span> <Icon type="edit" /> 10</span>, <span> <Icon type="ellipsis" />10</span>]}
                                >
                                </Card>

                                <Card size="small" title="工单信息" style={{ marginBottom: 24, }}
                                    actions={[<span><Icon type="setting" /> 10</span>, <span> <Icon type="edit" /> 10</span>, <span> <Icon type="ellipsis" />10</span>]}
                                >
                                </Card>
                            </Col>
                        </Row>



                    </GridContent>
                </div>
            </div>
        );
    }
}

export default DeviceMonitor;
